<input id="checkboxInput" type="checkbox" />
<label class="toggleSwitch" for="checkboxInput">
  <svg
    class="slider"
    viewBox="0 0 512 512"
    height="1em"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V256c0 17.7 14.3 32 32 32s32-14.3 32-32V32zM143.5 120.6c13.6-11.3 15.4-31.5 4.1-45.1s-31.5-15.4-45.1-4.1C49.7 115.4 16 181.8 16 256c0 132.5 107.5 240 240 240s240-107.5 240-240c0-74.2-33.8-140.6-86.6-184.6c-13.6-11.3-33.8-9.4-45.1 4.1s-9.4 33.8 4.1 45.1c38.9 32.3 63.5 81 63.5 135.4c0 97.2-78.8 176-176 176s-176-78.8-176-176c0-54.4 24.7-103.1 63.5-135.4z"
    ></path>
  </svg>
</label>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: slider, animation, switch, toggle, click effect */
/* To hide the checkbox */
#checkboxInput {
  display: none;
}

.toggleSwitch {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 50px;
  height: 30px;
  background-color: rgb(112, 112, 112);
  border-radius: 20px;
  cursor: pointer;
  transition-duration: 0.2s;
}

.slider {
  height: 20px;
  position: absolute;
  left: 5px;
  border-radius: 50%;
  transition-duration: 0.2s;
  border: 3px solid rgb(71, 71, 71);
  background-color: rgb(71, 71, 71);
  fill: rgb(255, 129, 129);
}

#checkboxInput:checked + .toggleSwitch .slider {
  transform: translateX(100%);
  transition-duration: 0.2s;
  fill: rgb(94, 255, 1);
}
/* Switch background change */
#checkboxInput:checked + .toggleSwitch {
  /* background-color: rgb(148, 118, 255); */
  transition-duration: 0.2s;
}

</style>
    